<template>
  <div>
    <el-button type="primary" @click="dialog=true;Add=true;Edit=false;">添加</el-button>
    <el-table
      :data="MovieInfo.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      style="width: 100%"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="电影名">
              <span>{{ props.row.MovieName }}</span>
            </el-form-item>
            <el-form-item label="上映日期">
              <span>{{ props.row.MovieDate }}</span>
            </el-form-item>
            <el-form-item label="电影 ID">
              <span>{{ props.row.MovieID }}</span>
            </el-form-item>
            <el-form-item label="电影时长">
              <span>{{ props.row.MovieTime }}分钟</span>
            </el-form-item>
            <el-form-item label="电影类型">
              <span>{{ props.row.MovieType }}</span>
            </el-form-item>
            <el-form-item label="电影产地">
              <span>{{ props.row.MovieAddress }}</span>
            </el-form-item>
            <el-form-item label="电影简介">
              <span>{{ props.row.MovieReview }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="电影 ID" prop="MovieID"></el-table-column>
      <el-table-column label="电影名" prop="MovieName"></el-table-column>
      <el-table-column label="电影类型" prop="MovieType"></el-table-column>
      <el-table-column label="电影图片" prop="MovieType">
        <template slot-scope="scope">
          <img :src="scope.row.MovieImg" style="width:50px;height:75px" />
        </template>
      </el-table-column>
      <el-table-column label="编辑">
        <template slot-scope="scope">
          <el-button type="primary" @click="dialogActor=true;SelectMovie(scope.row.MovieID)">添加导演/演员</el-button>
          <el-button
            type="danger"
            @click="dialog=true;Edit=true;Add=false;SelectMovie(scope.row.MovieID)"
          >修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 30px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="current_change"
      ></el-pagination>
    </div>
    <el-dialog title="电影信息" :visible.sync="dialog" @closed="resetForm('searchForm')">
      <el-form ref="searchForm" label-position="left" :model="Movie" label-width="80px">
        <el-form-item label="电影名称" prop="MovieName">
          <el-input v-model="Movie.MovieName" placeholder="电影名"></el-input>
        </el-form-item>
        <el-form-item label="电影时长" prop="MovieTime">
          <el-input v-model="Movie.MovieTime" placeholder="电影时长（单位分钟）"></el-input>
        </el-form-item>
        <el-form-item label="上映日期" prop="MovieDate">
          <el-date-picker v-model="Movie.MovieDate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="出产地" prop="MovieAddress">
          <el-input v-model="Movie.MovieAddress" placeholder="国家或地区"></el-input>
        </el-form-item>
        <el-form-item label="电影类型" prop="MovieType">
          <el-input v-model="Movie.MovieType" placeholder="用,分开"></el-input>
        </el-form-item>

        <el-form-item label="电影简介" prop="MovieReview">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="Movie.MovieReview"></el-input>
        </el-form-item>
        <el-form-item label="电影海报" prop="MovieImg">
          <el-input v-model="Movie.MovieImg" placeholder="请输入网络图片链接"></el-input>
          <img :src="Movie.MovieImg" alt style="width:100px;height:150px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="MovieAdd()" v-if="Add">确 定</el-button>
        <el-button type="primary" @click="MovieEdit()" v-if="Edit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="Movie.MovieName" :visible.sync="dialogActor" width="30%" center @closed="DirID=null;ActID=null;Movie=null">
      <el-row>
        <el-col :span="24" style="text-align:center;margin-top:50px;">
          导演:
          <el-select v-model="DirID" placeholder="请选择导演">
            <el-option
              v-for="item in DirectIn"
              :key="item.DirectID"
              :label="item.DirectName"
              :value="item.DirectID"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="text-align:center;margin-top:50px;">
          演员:
          <el-select v-model="ActID" placeholder="请选择演员">
            <el-option
              v-for="item in ActorIn"
              :key="item.ActorID"
              :label="item.ActorName"
              :value="item.ActorID"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogActor = false">取 消</el-button>
        <el-button type="primary" @click="ActAdd();">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      MovieInfo: [],
      total: 0,
      pagesize: 10,
      currentPage: 1,
      dialog: false,
      MovieID: null,
      Movie: {
        MovieName: "",
        MovieDate: "",
        MovieImg: "",
        MovieTime: "",
        MovieType: "",
        MovieReview: "",
        MovieAddress: ""
      },
      Add: true,
      Edit: false,
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      dialogActor: false,
      ActorIn: null,
      DirectIn: null,
      ActID: null,
      DirID: null
    };
  },
  created() {
    this.Ajax.get("api/MovieInfoes/GetMovieInfo").then(M => {
      this.MovieInfo = M.data;
     
      this.total = M.data.length;
    });
    this.Ajax.get("api/Actor/GetAllActor").then(M => {
      this.ActorIn = M.data;
    });
    this.Ajax.get("api/Direct/GetAllActor").then(M => {
      this.DirectIn = M.data;
    });
  },
  methods: {
    current_change: function(currentPage) {
      this.currentPage = currentPage;
    },
    resetForm(searchForm) {
      this.$refs[searchForm].resetFields();
      this.Movie.MovieName=null
      this.Movie.MovieDate=null
      this.Movie.MovieImg=null
      this.Movie.MovieTime=null
      this.Movie.MovieType=null
      this.Movie.MovieReview=null
      this.Movie.MovieAddress=null
    },
    MovieAdd() {
      this.Ajax.post("api/MovieInfoes/PostMovieInfo", {
        Movie: this.Movie
      }).then(M => {
        this.$message({
          message: "添加成功",
          type: "success"
        });
        this.dialog = false;
      });
    },
    SelectMovie(ID) {
      this.Ajax.get("api/MovieInfoes/GetMovieInfo?id=" + ID).then(M => {
        this.Movie = M.data;
        this.MovieID = ID;
      });
    },
    ActAdd() {
      if (this.ActID == null || this.DirID == null) {
        this.$message.error({
          message: "请完善信息",
          
        });
      } else {
        this.Ajax.post("api/Actor/AddActAndDir", {
          MovieID: this.Movie.MovieID,
          ActID: this.ActID,
          DirID: this.DirID
        }).then(M => {
          if (M.data == 1) {
            this.$message({
              message: "修改成功",
              type: "success"
            });
            this.dialogActor = false;
          } else {
            this.$message.error({
              message: "修改失败",
             
            });
          }
        });
      }
    },
    MovieEdit() {
      this.Ajax.put("api/MovieInfoes/PutMovieInfo", {
        Movie: this.Movie,
        ID: this.MovieID
      }).then(M => {
        this.$message({
          message: "修改成功",
          type: "success"
        });
        this.dialog = false;
      });
    }
  }
};
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>